<template>
    <el-dialog :title="$t('role.allotRole')" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
        <el-tabs tab-position="top">
			<el-tab-pane :label="$t('role.menuPermission')">
				<div class="treeMain">
					<el-tree ref="menuRef" node-key="id" :data="menu.list" :props="menu.props" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="$t('role.dataPermission')">
				<el-form label-width="100px" label-position="left">
					<el-form-item :label="$t('role.ruleType')">
						<el-select v-model="dept.dataType" :placeholder="$t('common.select')">
							<el-option :label="$t('role.allVisible')" :value="1"></el-option>
							<el-option :label="$t('role.personVisible')" :value="2"></el-option>
							<el-option :label="$t('role.deptVisible')" :value="3"></el-option>
							<el-option :label="$t('role.subDeptVisible')" :value="4"></el-option>
							<el-option :label="$t('role.selectDeptVisible')" :value="5"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('role.selectDept')" v-show="dept.dataType=='5'">
						<div class="treeMain" style="width: 100%;">
							<el-tree ref="deptRef" node-key="id" :data="dept.list" :props="dept.props" show-checkbox></el-tree>
						</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane :label="$t('role.consoleModule')">
				<div class="treeMain">
					<el-tree ref="gridRef" node-key="key" :data="grid.list" :props="grid.props" :default-checked-keys="grid.checked" show-checkbox></el-tree>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="$t('role.console')">
				<el-form label-width="100px" label-position="left">
					<el-form-item :label="$t('role.consoleView')">
						<el-select v-model="dashboard" :placeholder="$t('common.select')">
							<el-option v-for="item in dashboardOptions" :key="item.value" :label="item.label" :value="item.value">
								<span style="float: left">{{ item.label }}</span>
								<span style="float: right; color: #8492a6; font-size: 12px">{{ item.views }}</span>
							</el-option>
						</el-select>
						<div class="el-form-item-msg">{{ $t('role.consoleTips') }}</div>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<template #footer>
			<el-button @click="visible=false" >{{ $t('common.cancel') }}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit">{{ $t('common.save') }}</el-button>
		</template>
    </el-dialog>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import api from '@/api';

// 定义用于发射方法
const emit = defineEmits(['success', 'closed']);
// 定义响应式数据
const visible = ref(false);
const isSaveing = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);
const gridRef = ref(null);
const menu = reactive({
    list: [],
    checked: [],
    props: {
        label: (data) => data.title,
    },
});
const grid = reactive({
    list: [],
    checked: ["welcome", "ver", "time", "progress", "echarts", "about"],
    props: {
        label: (data) => data.title,
        disabled: (data) => data.isFixed,
    },
});
const dept = reactive({
    dataType: 1,
    list: [],
    checked: [],
    props: {
        value: "id",
        label: "name",
    },
    rule: "",
});
const dashboard = ref(0);
const dashboardOptions = ref([
    {
        value: 0,
        label: '数据统计',
        views: 'stats',
    },
    {
        value: 1,
        label: '工作台',
        views: 'work',
    },
]);
const roleid = ref(0);
// 组件挂载时加载数据
onMounted(() => {
    getMenu();
    getDept();
    getGrid();
});
// 自定义显示的方法
const open = (id = 0) => {
    roleid.value = id;
    visible.value = true;
    if (id) getRole();
};
// 自定义提交表单的方法
const submit = () => {
    isSaveing.value = true;
    //选中的和半选的合并后传值接口
    var checkedKeys      = menuRef.value.getCheckedKeys().concat(menuRef.value.getHalfCheckedKeys());
    var checkedKeys_dept = deptRef.value.getCheckedKeys().concat(deptRef.value.getHalfCheckedKeys());
    var checkedKeys_grid = gridRef.value.getCheckedKeys().concat(gridRef.value.getHalfCheckedKeys());
    const data = {
        menu_ids  : checkedKeys,
        role_ids  : roleid.value,
        dept_list : checkedKeys_dept,
        data_type : dept.dataType,
        grid_list : checkedKeys_grid,
        dashboard : dashboard.value,
    };
    isSaveing.value = false;
    visible.value = false;
    emit('success', data);
};
// 自定义获取角色数据的方法
const getRole = async () => {
    const role = await api.setting.role.auth.get( { role_id : roleid.value} );
    if (role.code == 200) {
        // 更新菜单权限
        menu.checked   = role.data.auth;
        // 更新数据权限
        dept.dataType  = role.data.role.data_type;
        dept.checked   = role.data.role.dept_list;
        // 更新控制台模块
        grid.checked   = role.data.role.grid_list;
        // 更新控制台视图
        dashboard.value= role.data.role.dashboard;
        // 更新树形选择组件的选中状态
        nextTick(() => {
            // 更新菜单权限
            let menuKeys = menu.checked.filter(key => menuRef.value.getNode(key).isLeaf);
            menuRef.value.setCheckedKeys(menuKeys, true);
            // 更新数据权限
            let deptKeys = dept.checked.filter(key => deptRef.value.getNode(key).isLeaf);
            deptRef.value.setCheckedKeys(deptKeys, true);
            // 更新控制台模块
            let gridKeys = grid.checked.filter(key => gridRef.value.getNode(key).isLeaf);
            gridRef.value.setCheckedKeys(gridKeys, true)
        });
    }
};
// 自定义获取菜单数据的方法
const getMenu = async () => {
    const res = await api.setting.menu.list.get();
    if (res.code == 200) {
        // 更新菜单数据
        menu.list = res.data;
    }
};
// 自定义获取部门数据的方法
const getDept = async () => {
    const res = await api.setting.dept.list.get();
    if (res.code == 200) {
        // 更新菜单数据
        dept.list = res.data;
    }
};
const getGrid = () => {
    grid.list = [
        { key: "welcome", title: "欢迎", isFixed: true },
        { key: "ver", title: "版本信息", isFixed: true },
        { key: "time", title: "时钟" },
        { key: "progress", title: "进度环", },
        { key: "echarts", title: "实时收入", },
        { key: "about", title: "关于项目" },
    ];
};
defineExpose({open});
</script>
<style scoped>
	.treeMain {height:280px;overflow: auto;border: 1px solid #dcdfe6;margin-bottom: 10px;}
</style>